<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>playground</title>
        <style>
            html,
            body {
                margin: 0;
            }

            #canvas {
                display: block;
                margin: auto;
                border: 1px solid #999;
            }
        </style>
    </head>
    <body>
        <canvas id="canvas" width="800" height="800"></canvas>
    </body>
    <script type="module">
        import {Create} from '../dist/main.js';
        const canvas = new Create('canvas', {
            background: '#000'
        });
        const {ctx} = canvas;
        // ctx.moveTo(200, 200);
        // ctx.lineTo(600, 200);
        ctx.shadowBlur = 1;
        ctx.lineWidth = 4;
        // ctx.globalCompositeOperation = 'xor';
        ctx.shadowColor = 'rgba(27, 71, 193, 0.8)';
        // ctx.strokeStyle = 'rgba(27, 71, 193, 0.2)';
        // ctx.stroke();
        ctx.moveTo(200, 300);
        ctx.lineTo(600, 300);
        const gradient = ctx.createLinearGradient(200, 200, 600, 200);
        gradient.addColorStop(0, 'rgba(27, 71, 193, 0.2)');
        gradient.addColorStop(8 / 400, 'rgba(27, 71, 193, 0.2)');
        gradient.addColorStop(12 / 400, '#00FFFF');
        gradient.addColorStop(48 / 400, 'rgba(115, 136, 255, 0)');
        gradient.addColorStop(49 / 400, 'rgba(27, 71, 193, 0.2)');

        gradient.addColorStop(100 / 400, 'rgba(27, 71, 193, 0.2)');
        gradient.addColorStop(104 / 400, '#00FFFF');
        gradient.addColorStop(140 / 400, 'rgba(115, 136, 255, 0)');
        gradient.addColorStop(141 / 400, 'rgba(27, 71, 193, 0.2)');

        gradient.addColorStop(1, 'rgba(27, 71, 193, 0.2)');
        ctx.strokeStyle = gradient;
        ctx.lineCap = 'round';
        ctx.stroke();
    </script>
</html>
